<template>
  <div class="home">
    <!-- 存放searchPopup.vue组件 -->
    <router-view v-if="$route.path == '/home/Searchpop'"></router-view>
    <div v-else>
      <!-- search 搜索组件 -->
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        @click="gotosearch"
      />
      <!-- 轮播组件 -->
      <SwipeCom :bannerArr="banerArr"></SwipeCom>
      <!-- grid导航组件 -->
      <Grid :channelArr="channel" ></Grid>
      <!-- 品牌组件 -->
      <Brand :picArr="brandList"></Brand>
    </div>
  </div>
</template>

<script>
// 导入首页数据请求
import { getIndexList } from "@/https/http";
// 导入轮播组件
import SwipeCom from "@/components/SwipeCom";
// 导入轮播组件
import Grid from "@/components/home/Grid";
// 引入品牌组件
import Brand from "@/components/home/Brand";
export default {
  data() {
    return {
      value: "", // 搜索数据
      banerArr: [], // 轮播图数组
      channel: [], // grid 数组
      brandList: [], // 品牌
    };
  },
  components: {
    SwipeCom,
    Grid,
    Brand,
  },
  created() {
    // 首页请求
    getIndexList().then(
      (res) => {
        //轮播数据
        this.banerArr = res.data.banner;
        // grid 导航数据
        this.channel = res.data.channel;
        //品牌数据
        this.brandList = res.data.brandList;
      },
      (err) => {
        console.log(err);
      }
    );
  },
  methods:{
    gotosearch(){
      this.$router.push('/home/Searchpop')
      // console.log(this.$route.path == '/home/Searchpop')
    }
  }
};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.home {
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
  box-sizing: border-box;
}
</style>